<template>
  <!-- 所有的内容要被根节点包含起来 -->
  <div id="home">
    <v-header
      activeClass="1"
      :tcxs="tcxs"
      v-on:childByValue="childByValue"
    ></v-header>

    <div class="box">
      <div class="swiperbanner">
        <swiper :options="swiperOption" ref="mySwiper">
          <!-- 分类 -->

          <swiper-slide v-for="item in banner" :key="item.id">
            <a v-if="item.linkUrl" :href="item.linkUrl" target="_blank">
              <img :src="item.cover" />
            </a>

            <router-link
              v-else
              :to="{
                name: 'Link',
                query: { id: item.id, cover: item.cover, name: item.name }
              }"
            >
              <img :src="item.cover"
            /></router-link>
          </swiper-slide>

          <!-- <swiper-slide><img src="../../assets/b1.jpg"/></swiper-slide>
          <swiper-slide><img src="../../assets/b2.jpg"/></swiper-slide>
          <swiper-slide><img src="../../assets/b3.jpg"/></swiper-slide>
          <swiper-slide><img src="../../assets/b4.jpg"/></swiper-slide> -->

          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>

        <div class="jad">
          <a href=""><img src="../../assets/ad1.png"/></a>
          <a href=""><img src="../../assets/ad2.png"/></a>
        </div>
      </div>

      <div class="clear"></div>

      <div class="jmain">
        <div class="jmain_l">
          <div class="horizonhomecard">
            <div class="top">
              <span class="left hwtext_65st">精品推荐</span>
              <!-- <span class="right">
                查看全部
                <img
                  src=""
                  class="arrow"
              /></span> -->
            </div>
            <div class="bottom">
              <div
                class="item both_ends_positive"
                v-for="(item, index) in tuijian"
                :key="item.id"
              >
                <div>
                  <router-link :to="{ name: 'Detail', query: { id: item.id } }"
                    ><img
                      :src="item.cover"
                      onerror='this.style.background="#f2f2f2"'
                      alt=""
                      class="img"
                  /></router-link>
                  <span class="label">{{ item.name }}</span>
                  <button class="buttom" @click="download(item.id)">
                    <div class="buttom_text hwtext_65st">安装</div>
                  </button>
                </div>
              </div>
            </div>
            <div data-v-585dc428="" style="display: none;">
              <div data-v-585dc428="" class="InstallPopup">
                <div data-v-585dc428="" class="tab-loading">
                  <div data-v-585dc428=""><span class="loading"></span></div>
                </div>
              </div>
            </div>
          </div>
          <div dir="ltr" class="horizonhomecard">
            <div class="top">
              <span class="left hwtext_65st">热门应用</span>
              <!-- <span class="right">
                查看全部
                <img
                  src=""
                  class="arrow"
              /></span> -->
            </div>
            <div class="bottom">
              <div
                class="item both_ends_positive"
                v-for="(item, index) in remen"
                :key="item.id"
              >
                <div>
                  <router-link :to="{ name: 'Detail', query: { id: item.id } }"
                    ><img
                      :src="item.cover"
                      onerror='this.style.background="#f2f2f2"'
                      alt=""
                      class="img"
                  /></router-link>
                  <span class="label">{{ item.name }}</span>
                  <button class="buttom" @click="download(item.id)">
                    <div class="buttom_text hwtext_65st">安装</div>
                  </button>
                </div>
              </div>
            </div>
            <div data-v-585dc428="" style="display: none;">
              <div data-v-585dc428="" class="InstallPopup">
                <div data-v-585dc428="" class="tab-loading">
                  <div data-v-585dc428=""><span class="loading"></span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="clear"></div>
          <div id="normalcard">
            <div class="top">
              <span class="left hwtext_65st">必备应用</span>
              <!-- <span class="right">
                查看全部
                <img
                  src=""
                  class="arrow"
              /></span> -->
            </div>
            <div dir="" class="bottom">
              <div class="bottom">
                <div
                  class="item item-Normal"
                  v-for="(item, index) in bibei"
                  :key="item.id"
                >
                  <router-link :to="{ name: 'Detail', query: { id: item.id } }"
                    ><img
                      :src="item.cover"
                      onerror='this.style.background="#f2f2f2"'
                      alt=""
                      class="img"
                  /></router-link>
                  <div class="div">
                    <div class="right">
                      <router-link
                        :to="{ name: 'Detail', query: { id: item.id } }"
                      >
                        <div class="labelbox">
                          <div class="mwlabelbox2">
                            <span class="name"> {{ item.name }}</span>
                            <div class="text">
                              <div data-v-f8fa9bf8="" class="newStarBox">
                                <span class="star stargrey">
                                  <span
                                    class="star starlight"
                                    :style="{
                                      width:
                                        item.star == 0
                                          ? '0%'
                                          : '' || item.star == 1
                                          ? '17.348248862%'
                                          : '' || item.star == 2
                                          ? '37.348248862%'
                                          : '' || item.star == 3
                                          ? '57.348248862%'
                                          : '' || item.star == 4
                                          ? '77.348248862%'
                                          : '' || item.star == 5
                                          ? '100%'
                                          : ''
                                    }"
                                  ></span>
                                </span>
                              </div>
                              <span> {{ item.categoryName }}</span>
                            </div>
                            <span class="detail">{{ item.subtitle }}</span>
                          </div>
                        </div></router-link
                      >
                    </div>
                    <button
                      class="button1 hwtext_65st"
                      @click="download(item.id)"
                    >
                      安装
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div data-v-585dc428="" style="display: none;">
              <div data-v-585dc428="" class="InstallPopup">
                <div data-v-585dc428="" class="tab-loading">
                  <div data-v-585dc428=""><span class="loading"></span></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="jmain_r">
          <div class="sidebar-mod">
            <h1 class="sidebar-h">应用分类</h1>
            <ul class="category-list">
              <li v-for="(item, index) in category" :key="item.id">
                <router-link :to="{ name: 'Apps', query: { id: item.id } }">{{
                  item.name
                }}</router-link>
              </li>
            </ul>
          </div>

          <div class="index-center-content">
            <div class="index-right-box">
              <div class="index-tab marginTab" id="J_index-tab-rank">
                <a class="rankapp rankselect" data-container="J_appRank">
                  <span class="ranktab" href="javascript:void(0);"
                    >应用排行榜</span
                  >
                </a>
              </div>
              <div class="index-rank-con" id="J_index-rank-con">
                <ul data-isset="true" id="J_appRank" class="J_appRankContainer">
                  <li v-for="(item, index) in paihang" :key="item.id">
                    <div class="app-rank-normal" style="display: block;">
                      <span class="num">{{ index + 1 }}</span>
                      <img :src="item.cover" width="24" height="24" />
                      <span class="appname ofh">{{ item.name }}</span>
                      <span class="appdownnum">
                        {{ item.downTimes }}人下载
                      </span>
                    </div>
                    <div class="app-rank-hover" style="display: none;">
                      <div class="num">{{ index + 1 }}</div>
                      <router-link
                        :to="{ name: 'Detail', query: { id: item.id } }"
                        ><img :src="item.cover" width="46" height="46"
                      /></router-link>
                      <div class="app-detail">
                        <router-link
                          :to="{ name: 'Detail', query: { id: item.id } }"
                        >
                          <span class="appname">{{ item.name }}</span>
                          <p>
                            <span class="star stargrey">
                              <span
                                class="star starlight"
                                :style="{
                                  width:
                                    item.star == 0
                                      ? '0%'
                                      : '' || item.star == 1
                                      ? '17.348248862%'
                                      : '' || item.star == 2
                                      ? '37.348248862%'
                                      : '' || item.star == 3
                                      ? '57.348248862%'
                                      : '' || item.star == 4
                                      ? '77.348248862%'
                                      : '' || item.star == 5
                                      ? '100%'
                                      : ''
                                }"
                              ></span>
                            </span></p
                        ></router-link>
                      </div>
                      <a
                        class="install-bt"
                        href="javascript:void(0);"
                        @click="download(item.id)"
                        >安装</a
                      >
                    </div>
                  </li>
                </ul>
                <ul
                  class="J_appRankContainer"
                  id="J_gameRank"
                  style="display:none"
                ></ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <v-footer></v-footer>
  </div>
</template>

<script>
//引入底部头部组件
import Header from "../common/Header.vue";
import Footer from "../common/Footer.vue";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import axios from "axios";
import qs from "qs";
import { log } from "util";
export default {
  data() {
    return {
      banner: [],
      category: [],
      paihang: [],
      tuijian: [],
      remen: [],
      bibei: [],
      tcxs: false,
      swiperOption: {
        // API
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        loop: true,
        autoplay: {
          disableOnInteraction: false,
          delay: 4000
        }
      }
    };
  },

  mounted() {
    // document.cookie = `userName=23434;domain=192.168.23.45;`;
    this.requestBanner();
    this.requestcategory();
    this.paihanglist();
    this.tuijianlist();
  },

  methods: {
    // 下载
    childByValue: function(childValue) {
      this.tcxs = childValue;
    },
    requestcategory() {
      var data = {
        // "a":"getPortalArticle",
        // "aid":aid,
      };

      axios.get("/api/appstore/category/findFirstCategory").then(result => {
        let res = result.data;

        console.log("res:", res);
      });

      this.$http({
        url: `/api/appstore/category/findFirstCategory`,
        method: "post",
        headers: {
          // "Authentication":this.utoken,
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: qs.stringify(data)
      })
        .then(res => {
          // console.log("申请：",res);
          if (res.data.code == "1") {
            this.category = res.data.datas;
            console.log("category:", this.category);
          } else {
            this.formmsg = res.data.msg;
          }
        })
        .catch(function(error) {});
    },
    requestBanner() {
      var data = {
        // "a":"getPortalArticle",
        // "aid":aid,
      };
      this.$http({
        url: `/api/appstore/subject/findAll`,
        method: "post",
        headers: {
          // "Authentication":this.utoken,
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: qs.stringify(data)
      })
        .then(res => {
          // console.log("申请：",res);
          if (res.data.code == "1") {
            this.banner = res.data.datas;
            console.log("bannerlist:", this.banner);
          } else {
            this.formmsg = res.data.msg;
          }
        })
        .catch(function(error) {});
    },

    paihanglist() {
      var data = {
        limit: 10
        // "aid":aid,
      };

      this.$http({
        url: `/api/appstore/rank/appRank`,
        method: "post",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: qs.stringify(data)
      })
        .then(res => {
          // console.log("申请paihang：", res);
          if (res.data.code == "1") {
            this.paihang = res.data.datas;
            console.log("paihang:", this.paihang);
          } else {
            this.formmsg = res.data.msg;
          }
        })
        .catch(function(error) {});
    },

    tuijianlist() {
      var data = {
        // limit: 10
        // "aid":aid,
      };

      this.$http({
        url: `/api/appstore/recommend/recommendAll`,
        method: "post",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: qs.stringify(data)
      })
        .then(res => {
          // console.log("申请paihang：", res);
          if (res.data.code == "1") {
            this.tuijian = res.data.datas[0].apps;
            this.remen = res.data.datas[1].apps;
            this.bibei = res.data.datas[2].apps;
            console.log("tuijian:", this.tuijian);
          } else {
            this.formmsg = res.data.msg;
          }
        })
        .catch(function(error) {});
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
    // 提供一个可操作的swiper对象
  },
  components: {
    "v-header": Header,
    "v-footer": Footer,
    Swiper,
    SwiperSlide
  }
};
</script>

<style lang="css" scoped>
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: none;
}
.swiper-button-prev,
.swiper-button-next {
  border: none !important;
}
</style>
